<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>全部订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 表单 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" prop="date" label="订单ID">
        <template slot-scope="scope"> {{ scope.row.po_id }}</template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="用户ID">
        <template slot-scope="scope"> {{ scope.row.u_id }}</template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="订单时间">
        <template slot-scope="scope"> {{ scope.row.po_time }}</template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="订单价格">
        <template slot-scope="scope"> {{ scope.row.po_price }}</template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="订单状态">
        <template slot-scope="scope"> {{ scope.row.po_status }}</template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="订单状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.po_status == 1" type="success">进行中</el-tag>
          <el-tag type="info" v-if="scope.row.po_status == 2">已完成</el-tag>
          <el-tag type="warning" v-if="scope.row.po_status == 3">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="联系人">
        <template slot-scope="scope"> {{ scope.row.po_linkman }}</template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="联系方式">
        <template slot-scope="scope"> {{ scope.row.po_userPhone }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.po_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: null,
    };
  },
  methods: {
    // 加载所有订单
    loadOrderList() {
      this.axios.get('/pet-order?page=1&pagesize=10').then(res => {
        console.log('加载订单列表', res);
        this.tableData = res.data.data;
      });
    },
    // 删除订单
    handleDelete(po_id) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          this.axios.post('/pet-order/del', `po_id=${po_id}`).then(res => {
            console.log('删除商家', res);
            if (res.data.code == 200) {
              this.loadOrderList();
            }
          });
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
  mounted() {
    this.loadOrderList();
  },
};
</script>
